<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- react核心代码 -->
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<!-- react和DOM交互的 -->
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<!-- 类型限定 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
		<title>props</title>
	</head>
	<body>
		<div id="root"></div>
		<div id="wrap"></div>
		<div id="contain"></div>
		<div id="default"></div>
		<script type="text/babel">
			class Person extends React.Component {
				render(h) {
					 const {name,gender,hobby}=this.props
					 
					// jsx模板语法
					return (
						<ul>
							<li>username:{name}</li>
							<li>gender:{gender}</li>
							<li>hobby:{hobby}</li>
						</ul>
					)
				}
				
			}
			Person.propTypes={//类型限定
				name:PropTypes.string.isRequired,
				gender:PropTypes.string,
				hobby:PropTypes.string,
				greet:PropTypes.func,
			}
			Person.defaultProps={
				gender:'男',
				hobby:'敲代码'
			}
			ReactDOM.render(<Person name="Tony" gender="female" hobby="running"/>, document.getElementById('root'));
			ReactDOM.render(<Person name="Juerry" gender="male" hobby="singing"/>, document.getElementById('wrap'));
			
			const person={name:'Lucky',gender:'female',hobby:'swimming'}
			ReactDOM.render(<Person {...person}/>, document.getElementById('contain'));
			ReactDOM.render(<Person name="赵晓棠"/>, document.getElementById('default'));
		</script>
	</body>
</html>
